<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
				
			}
			#top{
				width:600px;
				height:32px;
				background: #F0F0F0;
				margin:0 auto;
				position:relative;
				/*设置层级:比层级有个前提,必须在兄弟元素之间进行比较.所以要分析页面结构.决定给谁叫定位,加层级*/
				z-index: 10;
			}
			#top .box{
				width:80px;
				height:32px;
				line-height: 32px;
				text-align:center;
				border:1px solid black;
			}
			#top .box .hide{
				width:80px;
				height:100px;
				border:1px solid blue;
				background: blue;
			}
			#flash{
				background: yellow;
				width:600px;
				margin:0 auto;
				height:400px;
				position:relative;
				z-index: 1;
			}
			#flash div{
				width:100px;
				height:100px;
				background: coral;
			}
		</style>
	</head>
	<body>
		<div id="top">
			<div class="box">
				<div class="title">我是标题</div>
				<div class="hide">我是内容</div>
			</div>
		</div>
		
		<div id="flash">
			<div>1111</div>
		</div>
	</body>
</html>
